import { observer } from 'mobx-react';
import { toJS } from 'mobx';
import { Button, Input, Tabs,Modal } from 'antd';
import TaskViewExcel from "../../../components/task/view/page/excel";
import { fillinTypes } from '../../../constants/app';
import Workbook from './Workbook'
import { WeaLocaleProvider, WeaSlideModal, WeaTop } from "ecCom";
import './list.less';
import HtmlDataPanel from "./HtmlDataPanel";

const getLabel = WeaLocaleProvider.getLabel;
@observer
export default class DataList extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            filterDropdownVisible: false,
            data: this.props.store.tableStore.datas,
            searchMap: this.props.store.tableStore.filterMap ? this.props.store.tableStore.filterMap : {},
        }

    }
    render() {
        const { store } = this.props;
        this.rightLevel = 1;
        if (store.app && store.app.rightLevel) {
            this.rightLevel = store.app.rightLevel;
        }
        
        return (
            // 数量需要随时变化
            <div className="edc-data-list">
                <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@o6i9b6`}
                    type="card"
                    className="edc-tabs"
                    size="mini"
                    activeKey={store.selectedForm}
                    onChange={store.onChangeSelectedForm}
                >
                    {
                        store.forms.map(tab => {
                            return (
                                [<Tabs.TabPane ecId={`${this && this.props && this.props.ecId || ''}_undefined@lxbnzz@${tab.key}`} key={tab.key} tab={`${tab.title}(${tab.count || 0})`} />,
                                ...tab.tables.map(d => (
                                    <Tabs.TabPane ecId={`${this && this.props && this.props.ecId || ''}_undefined@6cwofu@${tab.key}`} key={`${tab.key}_${d.key}`} tab={d.name} />
                                ))]
                            )
                        })
                    }
                </Tabs>
                <Workbook ecId={`${this && this.props && this.props.ecId || ''}_Workbook@uljhlr`} store={store} height={store.fillinType === fillinTypes.MULTI ? 'calc(100% - 47px)' : 'calc(100% - 47px)'} />
                {
                    store.fillinType === fillinTypes.MULTI ?
                        <WeaSlideModal ecId={`${this && this.props && this.props.ecId || ''}_WeaSlideModal@5rintr`}
                            visible={store.hide}
                            width={'60'}
                            measure={'%'}
                            height={'100'}
                            //title={`ecology | ${getLabel('83110', '查看详情')}`}
                            title={<div><div className="title-close-div" onClick={() => this.changeHide(false)}><span className="title-close"/></div><div className={'title-btns'}>{this.getButtons()}</div></div>}
                            onClose={() => this.changeHide(false)}
                            //onblur={() => this.changeHide(false)}
                            direction={'right'}
                            hasScroll={false}
                            content={store.hide && 
                            // <WeaTop
                            //     title={store.title}
                            //     iconBgcolor="#1a57a0"
                            //     icon={<i className="icon-coms02-Data-center" />}
                            //     buttons={this.getButtons()}
                            // >
                            <TaskViewExcel ecId={`${this && this.props && this.props.ecId || ''}_TaskViewExcel@ma6cxe`} store={store.slideStore} readonly={this.rightLevel != 2}></TaskViewExcel>
                            /* </WeaTop> */
                            }
                            mask={true}
                            maskClosable={true}
                            closable={false}
                        >

                        </WeaSlideModal>
                        :
                        <HtmlDataPanel ecId={`${this && this.props && this.props.ecId || ''}_HtmlDataPanel@pajgb9`}
                            visible={store.hide}
                            detailData={store.detailData}
                            reloadData={store.reloadData}
                            rightLevel={store.rightLevel}
                            close={() => this.changeHide(false)}
                        />
                }

            </div>
        )
    }

    getButtons = () => {
        const { store } = this.props;

        const readonly = this.rightLevel != 2;
        store.slideStore.notAutoSave = '1';
        store.slideStore.canSubmit = !readonly;
        const buttons = readonly ? [<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@2yowjy@$changeHide`} type="ghost" onClick={() => this.changeHide(false)}>{getLabel(511699, "关闭")}</Button>] : [
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@g8dhtc@$deleteViewData`} onClick={this.deleteViewData} type="primary">{getLabel('502286', '删除')}</Button>,
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@9afmvr@$saveExcel`} onClick={() => store.slideStore.saveExcel(store)} type="primary">{getLabel(30986, '保存')}</Button>,
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@vfexb0@$changeHide`} type="ghost" onClick={() => this.changeHide(false)}>{getLabel(31129, '取消')}</Button>
        ];
        return buttons;
    }

    changes(e) {
    }

    changeTable = (tab, { key }) => {
        const { store } = this.props;
        store.changeTable(tab.key, key);
    }
    changeHide = (bool) => {
        const { store } = this.props;
        store.changeHide(bool);
    }

    operateClick = (record, index, operate, flag) => {
        const { store } = this.props;
        if (operate.index === '0') {

            store.slideStore.init(this.params = { pageid: operate.otherpara, userdataid: record.randomFieldId });

            this.changeHide(true);
        }
    }

    deleteViewData = () => {
        const { store } = this.props;
        Modal.confirm({
            content: getLabel('505984', '是否确认删除？'),
            onOk() {
                store.slideStore.deleteViewData(store);
            }
        })
    }

    getColumns = (columns) => {
        let col = [];
        if (columns) {
            columns.forEach(element => {
                const c = Object.assign(toJS(element), { ...toJS(this.getColumnSearchProps(element.title, element.dataIndex)) });
                col.push(c);
            });

        }
        return col;
    }

    changeVisible = visible => {
        this.setState({ filterDropdownVisible: visible });
    }
    getColumnSearchProps = (title, key) => {
        const { store } = this.props;
        const realKey = store.selectedForm + '@' + key;
        const value = this.state.searchMap[realKey];
        return {
            filterDropdown: (
                <div className="custom-filter-dropdown-edc">
                    <Input ecId={`${this && this.props && this.props.ecId || ''}_Input@ronxvd`}
                        placeholder={getLabel('509253','筛选') + title}
                        value={value}
                        onChange={(e) => { this.onInputChange(e, realKey) }}
                        onPressEnter={(a, b, c) => this.onSearch(a)}
                        style={{ width: 188, marginBottom: 8, display: 'block' }}
                    />
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@0v1615`} type="primary"
                        onClick={(e) => this.reset(realKey)}
                        style={{ width: 90, marginRight: 8 }}>{getLabel('509254','重置')}</Button>
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ya6f3g`} type="primary"
                        onClick={this.onSearch}
                        style={{ width: 90 }}>{getLabel('509259','过滤')}</Button>

                </div>
            ),
            filterDropdownVisible: this.state.filterDropdownVisible,
            onFilterDropdownVisibleChange: this.changeVisible,
            width: 100,
            sorter: true,
        }
    }


    onInputChange = (e, key) => {
        const { searchMap } = this.state;
        const newSearchMap = { ...searchMap, [key]: e.target.value };

        this.setState({ searchMap: newSearchMap });
    }

    reset = (key) => {
        const { searchMap } = this.state;
        const newSearchMap = { ...searchMap, [key]: '' };

        this.setState({ searchMap: newSearchMap });
    }

    onSearch = (b) => {
        const { store } = this.props;
        
        this.setState({
            filterDropdownVisible: false
        });
        
        store.filterTable(this.state.searchMap);
    }

}